import React, {Fragment} from 'react';
import bScroll from '@better-scroll/core';
import MouseWheel from '@better-scroll/mouse-wheel';
import echarts from 'echarts';
import echartOption from './echartOption';
import * as utils from '../../assets/js/utils/index';
import './index.css';
bScroll.use(MouseWheel);

class RainTable extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            columns: [],
            sDate: [],
            sData: [],
            showChart: false
        }
        this.dateScroll = null;
        this.aScrollX = null;
        this.aScrollY = null;
    }

    UNSAFE_componentWillReceiveProps(nextProps){
        if(this.state.showChart && nextProps.isLive){
            this.initChart(nextProps);
        }else{
            this.handleData(nextProps.isLive);
        }
    }

    //处理表格数据
    handleData(isLive){
        const columns = isLive ? [
            { title: '雄县', dataIndex: 'xionxian' },
            { title: '安新县', dataIndex: 'anxin' },
            { title: '容城县', dataIndex: 'rongchen' }
        ] : [
            { title: '当前降雨量', dataIndex: 'now' },
            { title: '未来1h', dataIndex: 'oneh' },
            { title: '未来2h', dataIndex: 'twoh' },
            { title: '未来3h', dataIndex: 'threeh' }
        ];
        const data = isLive ? [
            { date: '2020-08-21', xionxian: '1.5mm', anxin: '1.7mm', rongchen: '1.7mm' },
            { date: '2020-08-22', xionxian: '1.5mm', anxin: '1.7mm', rongchen: '1.7mm' },
            { date: '2020-08-23', xionxian: '1.5mm', anxin: '1.7mm', rongchen: '1.7mm' },
        ] : [
            { date: '雄县', now: '1.5mm', oneh: '1.7mm', twoh: '1.7mm', threeh: '1.7mm' },
            { date: '安新县', now: '2.5mm', oneh: '1.7mm', twoh: '1.7mm', threeh: '1.7mm' },
            { date: '容县', now: '3.6mm', oneh: '3.6mm', twoh: '3.6mm', threeh: '3.6mm' },
            { date: '雄县', now: '3.6mm', oneh: '1.7mm', twoh: '1.7mm', threeh: '1.7mm' },
            { date: '安新县', now: '2.5mm', oneh: '3.6mm', twoh: '1.7mm', threeh: '1.9mm' },
        ];
        const dataKeys = columns.map(item => item.dataIndex);
        const aTempData = data.map(item => dataKeys.map(key => item[key]));
        const aTempDate = data.map(ktem => ktem.date);
        this.setState({ columns, sDate: aTempDate, sData: aTempData }, () => {
            this.eventDateScroll();
            this.eventTableScrollX();
            this.eventTableScrollY();
            this.addEventOnScroll();
        });
    }

    //初始化柱状图表
    initChart(props){
        const checkedSites = utils.getSelectSite(props.siteList);
        const myChart = echarts.init(document.getElementById('myChart'));
        const xAxisData = ['2020-08-21', '2019-08-21', '2018-08-21', '2017-08-21', '2016-08-21', '2015-08-21'];
        const seriesData = checkedSites.map(item => {
            return {
                name: item.name,
                type: 'bar',
                itemStyle: {
                    barBorderRadius: [6, 6, 0, 0]
                },
                barWidth: 7,
                data: [1.7, 1.5, 1.7, 1.5, 1.7, 1.5]
            }
        });
        const myOption = echartOption(xAxisData, seriesData);
        myChart.setOption(myOption, true);
    }

    //支持时间段滚动
    eventDateScroll(){
        this.dateScroll = new bScroll('.datelist', {
            freeScroll: true,
            scrollX: false,
            scrollY: true,
            probeType: 3,
            mouseWheel: true
        });
    }

    //支持表格X轴滚动
    eventTableScrollX(){
        this.aScrollX = new bScroll('.right-part', {
            freeScroll: true,
            scrollX: true,
            scrollY: false,
            stopPropagation: true
        });
    }

    //支持表格值Y轴滚动
    eventTableScrollY(){
        this.aScrollY = new bScroll('.table-list', {
            freeScroll: false,
            scrollX: false,
            scrollY: true,
            probeType: 3,
            mouseWheel: true,
            stopPropagation: true
        });
    }

    //监听滚动轴滚动
    addEventOnScroll(){
        this.dateScroll.on('scroll', (pos) => {
            this.aScrollY.scrollTo(pos.x, pos.y, 300);
        });
    }

    //显示隐藏表格和图表
    displayTable(){
        this.setState({ showChart: !this.state.showChart }, () => {
            if(this.state.showChart && this.props.isLive){
                this.initChart(this.props);
            }
        });
    }

    //显示隐藏站点列表
    showSiteBar(){
        this.props.showSiteBar(!this.props.isShowSite);
    }

    componentWillUnmount(){
        this.setState = (state, callback) => {
            return ;
        }
    }
    
    render() {
        const { isShow, closeTable, isLive } = this.props;
        const { sDate, sData, showChart, columns } = this.state;
        return (
            <Fragment>
                {/* 表格遮罩层 */}
                <div className={isShow ? 'mask' : 'mask hide'} onClick={() => closeTable()}></div>
                {/* 表格列表 */}
                <div className={isShow ? 'table-wrapper move' : 'table-wrapper unmove'}>
                    <div className='horizontal-line'></div>
                    <div className='nav'>
                        <div className='title'>{isLive ? '8月21日历史同期累计降雨量' : '未来3小时预报数据'}</div>
                        <div className={isLive ? 'btn-group' : 'btn-group hide'}>
                            <div className={showChart ? 'site' : 'site hide'} onClick={() => this.showSiteBar()}></div>
                            <div className={showChart ? 'list' : 'chart'} onClick={() => this.displayTable()}></div>
                        </div>
                    </div>
                    <div className='content'>
                        {/* 表格内容 */}
                        <div className={showChart && isLive ? 'table hide' : 'table'}>
                            <div className='left-part'>
                                <div className='title'>{isLive ? '时段' : '站点名称'}</div>
                                <div className='datelist'>
                                    <ul>
                                        {
                                            sDate.length > 0 ? sDate.map((day, index) => {
                                                return (
                                                    <li key={index}>{day}</li>
                                                )
                                            }) : ''
                                        }
                                    </ul>
                                </div>
                            </div>
                            <div className='right-part'>
                                <div className='content-wrapper'>
                                    <div className='title'>
                                        <ul>
                                            {
                                                columns.length > 0 ? columns.map((ktem, kndex) => {
                                                    return (
                                                        <li key={kndex}>{ktem.title}</li>
                                                    )
                                                }) : ''
                                            }
                                        </ul>
                                    </div>
                                    <div className='table-list'>
                                        <div className='list-wrapper'>
                                            {
                                                sData.length > 0 ? sData.map((list, index) => {
                                                    return (
                                                        <ul key={index}>
                                                            {
                                                                list.length > 0 ? list.map((entry, pndex) => {
                                                                    return (
                                                                        <li key={pndex} className={pndex === 0 && !isLive ? 'active' : ''}>{entry}</li>
                                                                    ) 
                                                                }) : ''
                                                            }
                                                        </ul>
                                                    )
                                                }) : <div className='null-item'>暂无数据</div>
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {/* echarts图表 */}
                        <div className={showChart && isLive ? 'my-chart' : 'my-chart hide'} id="myChart"></div>
                    </div>
                </div>
            </Fragment>
        )
    }
}

export default RainTable;